<template>
	<view class="contain">

		<headTop></headTop>
		<h3>购物车</h3>
		<view class="scroll-view-container">
			<scroll-view :style="{height:wh + 'px'}" scroll-y="true">
				<view class="goodsInfo" v-for="(item,index) in goodsInfo">
					<view class="goodsDetail">
						<span>{{item.typeName}}{{item.sizeName}}</span>
						<span>{{item.numberChoise}}张</span>
					</view>
					<span class="addBtn" @click="changeVal(index)">-</span>
				</view>

			</scroll-view>
		</view>

		<view class="contain-botton" ref="botton">
			<view class="contain-bot">
				<span>总数</span>
				<span>{{allTable}}张</span>

			</view>

			<view class="contain-ten">
				<button @click="back">返回</button>
				<button @click="comfirm">确认下单</button>
			</view>

		</view>
	</view>
</template>

<script>
	import headTop from "@/components/common/headTop/headTop.vue";
	export default {
		data() {
			return {
				wh: 0,
        active:0,
				goodsInfo: [],

			}
		},
		components: {
			headTop,
		},
		computed: {
			//  获取购物车总条数
			allTable() {
				if (this.goodsInfo.length > 0) {
					let number = 0
					this.goodsInfo.map(item => {
						number += parseInt(item.numberChoise)
					})
					return number
				} else {
					return 0
				}
			},
			//获取购物车总价格
			allMoney() {
				if (this.goodsInfo.length > 0) {
					let money = 0
					this.goodsInfo.map(item => {
						money += item.numberChoise * item.price
					})
					return money
				} else {
					return 0
				}
			}
		},
		methods: {
			//删除
			changeVal(index) {
				this.goodsInfo.splice(index, 1)
				uni.setStorageSync('cart', JSON.stringify(this.goodsInfo))
			},
			comfirm() { //确认下单
				let arr = this.goodsInfo.map(item => {
					return {
						"linenPriceId": item.priceId,
						'num': item.numberChoise
					}
				})


				console.log('请求购物车获取订单id接口 order/placeAnOrder', {
					"orderItem": arr,
					"orderType": 0
				})

				console.log("json", JSON.stringify({
					"orderItem": arr,
					"orderType": 0
				}))
				this.$request.post('order/placeAnOrder', {
					// "id": "3612736127",
					"orderItem": arr,
					"orderType": 0
				}).then(res => {
					console.log('收到购物车获取订单id接口 order/placeAnOrder', {
						"orderItem": arr,
						"orderType": 0
					})
					uni.navigateTo({
						url: "/pages/payDetail/payDetail/payDetail?orderId=" + res.data + '&money=' + this
							.allMoney
					})
				})

			},
			back() {
      uni.reLaunch({
      	url: "/pages/index/index?active=" + this.active
      })
			
			}
		},

		onLoad(option) {
     this.active = option.active



			// let sys = uni.getSystemInfoSync()
			// this.wh = sys.windowHeight - 240 //滑动可视区域
			// let car = uni.getStorageSync('cart') // 购物车信息
			// console.log(car)
			// if (car) {
			// 	this.goodsInfo = JSON.parse(car)
			// }
			// console.log("小程序请求获取接口凭证 user/accessToken")
			// this.$request.get('user/accessToken').then(res => {
			// 	onsole.log("收到获取接口凭证 user/accessToken", res)
			// })
		},

		onShow() {
			console.log("=====onShowonShowonShow=========")

			let sr = this.$store.state.car
			console.log('vuex', sr)
			let sys = uni.getSystemInfoSync()
			this.wh = sys.windowHeight - 240 //滑动可视区域
			let car = uni.getStorageSync('cart') // 购物车信息

			if (car) {
				this.goodsInfo = JSON.parse(car)
			}
			console.log("小程序请求获取接口凭证 user/accessToken")
			this.$request.get('user/accessToken').then(res => {
				console.log("收到获取接口凭证 user/accessToken", res)
			})
		}

	}
</script>

<style scoped lang="less">
	.contain {
		width: 100%;
		height: 100vh;
		background-color: rgb(242, 242, 242);
		h3 {
			padding-top: 40rpx;
			text-align: center;
			margin-bottom: 40rpx;
		}
		.goodsInfo {
			height: 100rpx;
			line-height: 100rpx;
			width: 100%;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
			margin-bottom: 2rpx;
			.goodsDetail {
				margin-left: 20rpx;
				span {
					&:first-child {
						margin-right: 20rpx;
					}
				}
			}
		}
		.contain-botton {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 240rpx;
			.contain-bot {
				background-color: #fff;
				height: 90rpx;
				padding-left: 20rpx;
				line-height: 90rpx;
				border: 1px solid #000000;
				display: flex;
				align-items: center;
				justify-content: start;
				span {
					&:last-child {
						margin-left: 30rpx;
					}
				}
			}
			.contain-ten {
				display: flex;
				justify-content: center;
				margin-top: 30rpx;
				z-index: 99;
				background-color: rgb(242, 242, 242);
				button {
					width: 220rpx;
					height: 80rpx;
					line-height: 80rpx;
					background-color: #fff;
				}
			}
		}
	}
  
</style>